<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/js/Grid/css/grid.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/Grid/js/grid.js"></script>
    <script>
        window.addEventListener("message", evt => {
            var data = evt.data;
            schema = data.schema;
            table = data.table;
            loadGrid();
        });
    </script>
</head>

<body>
    <div id="grid"></div>
    <script>
        var schema, table;
        $(function () {
            initColumnsGrid();
        });
        var data;
        var gridColumns;
        function initColumnsGrid() {
            gridColumns = new Grid("grid", {
                isFixHead: true,
                sizeColumn: true,
                height: 100,
                isPage: false,
                colWidths: [
                    30, 150, 80, 80, 100, 80, 80, 80
                ],
                headArr: [
                    [
                        { text: "序号" },
                        { text: "名称" },
                        { text: "类型" },
                        { text: "关联列" },
                        { text: "定义" },
                        { text: "外键表列" },
                        { text: "外键-删除" },
                        { text: "外键-更新" }
                    ]
                ],
                columnArr: [
                    { type: "index" },
                    { type: "lab", name: "name", cutLen: 20, title: "name" },
                    { type: "lab", name: "typeString" },
                    { type: "lab", name: "constraintkeys" },
                    { type: "lab", name: "content" },
                    { type: "lab", name: "referenceTableName" },
                    { type: "lab", name: "delete_Action" },
                    { type: "lab", name: "update_Action" }
                ],
                onQuery: function (pageIndex, pageSize, orders) {
                    if (orders.length > 0) {
                        initColumns(orders);
                    }
                }
            });
            gridColumns.init({ data: [] });
        }
        function initColumns(orders) {
            var columns = data.constraints.map(col => {
                //约束类型
                if (col.type == "DefaultValue") {
                    col.typeString = "默认";
                } else if (col.type == "Check") {
                    col.typeString = "检查";
                } else if (col.type == "PrimaryKey") {
                    col.typeString = "主键";
                } else if (col.type == "Unique") {
                    col.typeString = "唯一";
                } else if (col.type == "ForeignKey") {
                    col.typeString = "外键";
                    col.referenceTableName=`${col.referenceTableName}(${col.referenceColumnName})`;
                }
                return col;
            });
            gridColumns.init({ data: columns });
            var height = document.body.clientHeight - 10 - 35;
            gridColumns.setHeight(height + "px");
        }
        function loadGrid() {
            showLoading();
            $.post("/api/mysqlmanage/GetTableDetail", { schema, table }, function (res) {
                data = res.data;
                initColumns();
            }).always(hideLoading);
        }
    </script>
</body>

</html>